<template>
	<div class="pay">
		<div v-if="!payStatus">请选择支付方式</div>

		<div class="penal penal2" v-if="payStatus">
			<h4>已支付</h4>
			<div>即将去往小程序，请耐心等待。。。</div>
			<i class="el-icon-loading"></i>
			<h4 class="go" @click="payRes">去往小程序，参与报名~</h4>
		</div>

		<div class="penal" v-else>
			<div class="pay-type">
				<div :class="payType == 2 ? 'item on' : 'item'" @click="payType = 2">
					<div class="left">
						<img src="../../assets/images/icon/weixin.png" alt="">
						<span>微信支付</span>
					</div>
					<div class="icon"></div>
				</div>
				<!-- <div :class="payType == 1 ? 'item on' : 'item'" @click="payType = 1">
					<div class="left">
						<img src="../../assets/images/icon/alipay.png" alt="">
						<span>支付宝</span>
					</div>
					<div class="icon"></div>
				</div> -->
			</div>
			<div class="pab">
				<div class="btn" @click="doPay">立即支付</div>
			</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios';

	export default {
		data () {
			return {
				payType: 2,
				payStatus:false,
				payParams:{},
				wxPoll: null,
			}
		},
		created(){
			this.payParams = this.$route.query
			this.$store.commit("SET_PATHID", this.payParams.pathId)
			this.$store.commit("SET_PHONE", this.payParams.phone)
			this.$store.commit("SET_PRODUCT", this.payParams.productId)
			this.payRes()
		},
		mounted(){
			this.getProduct()
			this.payRes()
		},
		methods:{
			getProduct(){
				axios({
					method:'GET',
					url: `${this.$baseURL}/queryProductInfo`,
					params:{
						productId: this.payParams.productId
					}
				}).then(res => {
					this.payParams.total = res.data.productPrice
					this.payParams.productName = res.data.productName
				})
			},
			doPay(){
				this.doPoint()
				this.wechatPay()
				// this.payType == 1 ? this.alipay() : this.wechatPay()
			},
			//支付宝支付
			alipay(){
				axios({
					method:"GET",
					url:`${this.$baseURL}/aliPayment`,
					params: {
						pathId: this.payParams.pathId,
						productId: this.payParams.productId,
						productName: this.payParams.productName,
						total: this.payParams.total,
						userPhone: this.payParams.phone
					}
				}).then(res => {
					window.location.href = res.data
				})
			},
			//微信支付
			wechatPay(){
				axios({
					method:"GET",
					url:`${this.$baseURL}/v3/h5Pay`,
					params: {
						pathId: this.payParams.pathId,
						productId: this.payParams.productId,
						price: (this.payParams.total)*100,
						productName: this.payParams.productName,
						userPhone: this.payParams.phone
					}
				}).then(res => {
					this.wxPolling ()
					let that = this
					setTimeout(() => {
						clearInterval(that.wxPoll)
					},180000)
					window.location.href = res.data
				})
			},
			wxPolling(){
				this.wxPoll = setInterval(() => {
					this.payRes()
				},1000)
			},
			payRes(){
				axios({
					method:"GET",
					url:`${this.$baseURL}/aliPaymentResults`,
					params: {
						userPhone: this.payParams.phone,
						productId: this.payParams.productId
					}
				}).then(res => {
					if(res.data.code == 200){
						this.payStatus = true
						clearInterval(this.wxPoll)
						this.wechatOpen()
						// this.getToken()
					}else{
						this.payStatus = false
					}
				})
			},
			//打开获客链接
			wechatOpen(){
				axios({
					method:"POST",
					url:`${this.$baseURL}/getWechatIndexClass`,
					params: {
						userPhone: this.payParams.phone,
					}
				}).then(res => {
					if(res.data.code == 200){
						let data = res.data.data
						this.custSms(data.class_id,data.class_user_id)
						window.location.href = data.class_wechat_index + '?customer_channel=' + data.class_id + '_H5' + '_' + this.payParams.productId
					}
				})
			},
			//下发客户短信
			custSms(id,wx){
				axios({
					method:"POST",
					url:`${this.$backend}/customer_acquisition/send_signup_sms`,
					data: {
						"class_id": id,
    					"wx_user_id":wx
					}
				}).then(res => {
					console.log(res)
				})
			},
			//获取微信toekn
			// getToken(){
			// 	axios.get(`${this.$siteURL}/wxapi/cgi-bin/token?grant_type=client_credential&appid=${this.$wechatAppid}&secret=${this.$wechatSecret}`).then(res => {
			// 		if(res.status == 200){
			// 			this.getScheme(res.data.access_token)
			// 		}
			// 	}).catch(err => {
			// 		console.log(err)
			// 	})
			// },
			// //获取加密scheme码
			// getScheme(token){
			// 	axios({
			// 		method:"POST",
			// 		url:`${this.$siteURL}/wxapi/wxa/generatescheme?access_token=${token}`,
			// 		data:{
			// 			jump_wxa:{
			// 				query:"pathId=" + this.payParams.pathId + "&phone=" + this.payParams.phone  //1.0.3版小程序
			// 			}
			// 		}
			// 	}).then(res => {
			// 		window.location.href = res.data.openlink
			// 	})
			// },
			//埋点
			doPoint(){
				let params = {
					clickId:  this.payParams.pathId,
					productId: this.payParams.productId,
					ecPaymentMethod: this.payType - 1
				}
				axios({
					method:"POST",
					url:`${this.$baseURL}/insertApplyEc`,
					params: params
				}).then()
			},
			goBack(){
				this.$router.go(-1)
			}
		}
	}
</script>

<style scoped>
	.pay{background: #F2F2F2;padding: 20px;height: calc(100vh - 40px);font-size: 16px;}

	.penal{background: #fff;height: calc(100vh - 110px);padding: 0 20px;border-radius: 10px;margin-top: 20px;position: relative;}
	.penal .item{border-bottom: 1px solid #ccc;padding: 20px 0;display: flex;justify-content: space-between;}
	.penal .item .left{display: flex;align-items: center;}
	.penal .item img{width: 30px;height: 30px;margin-right: 10px;}
	.penal .item .icon{width: 40px;height: 40px;border: 1px solid #ccc;border-radius: 50%;transform: scale(.5);}
	.penal .item.on .icon{background: url(../../assets/images/icon/checked.png) no-repeat #FF7200 center;border-color: #FF7200;}
	.penal .pab{bottom: 20px;text-align: center;width: calc(100% - 40px);}
	.penal .btn{color: #fff;font-size: 20px;padding: 10px 25px;display: inline-block;background: linear-gradient(90deg, #ff4242 0%, #ff7e18 100%);width: 240px;border-radius: 30px;}

	.penal2{text-align: center;padding-top: 30px;height: calc(100vh - 150px);}
	.penal2 h4{background: #e1f3d8;width: 200px;border-radius: 20px;padding: 10px;display: inline-block;font-size: 20px;font-weight: normal;margin-bottom: 20px;}
	.penal2 i{font-size: 40px;color: #c1e1b1;margin-top: 20px;}
	.penal2 .go{color: #fff;font-size: 14px;padding: 10px 25px;background: linear-gradient(90deg, #ff4242 0%, #ff7e18 100%);width: 240px;border-radius: 30px;margin-top: 30px;}


	.mask{position: fixed;width: 100vw;height: 100vh;background: rgba(0, 0, 0, 0.5);z-index: 99;top: 0;left: 0;}
	.panel{background: url(../../assets/images/retain.png) no-repeat;width: 100%;height: 305px;background-size: cover;    margin-top: 40%;position: relative;}
	.panel .df{position: absolute;bottom: 0;left: 0;right: 0;justify-content: center;}
	.panel .btn{padding: 10px 20px;border-radius: 10px;margin: 20px 15px 40px;font-size: 20px;font-weight: bold;}
	.panel .left{color: #7D2500;border: 1px solid #7D2500;}
	.panel .right{color: #fff;background: linear-gradient(90deg, #FF0000 0%, #FF7200 100%);}


</style>